<template>
	<view class="con">
		<view class="con_header">
			<view class="con_header_name">{{data.goodsName}}</view>
			<view class="con_header_date">有效期：{{data.startTime}}-{{data.endTime}}</view>
		</view>
		<view class="con_header_con">
			<view class="con_header_but " v-if="data.status=='0'" @click.stop="copyCouponCode">复制券码</view>
			<view class="con_header_but " v-if="data.status=='0'" @click.stop="exchange">立即兑换</view>
			<view class="con_header_but con_header_buts" v-else>券码已过期</view>
			<view class="con_header_center">
				<view class="content_list_top"></view>
				<view class="content_list_con_solid"></view>
				<view class="content_list_bot"></view>
			</view>
			<view class="con_tit">
				<view class="con_tit_name">使用说明：</view>
				<text v-html="data.remark"></text>
				<view>
					兑换链接地址：<a class="href_class" ref="urlHref" :href="data.url">{{data.url}}</a>
				</view>
			</view>
		</view>
		<view class="imgs" v-if="data.status=='1'">
			<image src="../../static/expired.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				data: {
					id: '',
					status: "1",
					goodsName: '优惠券',
					startTime: "1970-01-01",
					endTime: '1970-01-31',
					remark:'',
					url:'',
				},
			}
		},
		methods: {
			copyCouponCode() {
				uni.setClipboardData({
					data: this.data.code,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					}
				})
				//调用接口领取
				uni.request({
					url: "/api/h5/receiveCoupon",
					method: 'post',
					data: {
						id: this.data.id
					},
					header: {
						"token": this.token
					},
					success: (res) => {
						if (res.data.code == 200) {
							
						} else if (res.data.code == 500) {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
						} else if (res.data.code == 999) {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
							uni.redirectTo({
								url: '/pages/index/index',
							})
							uni.removeStorageSync("token");
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '领取兑换码异常',
							icon: 'error'
						})
					}
				})
			},
			exchange(){
				this.$refs.urlHref.click();
			},
		},
		onLoad() {
			this.token = uni.getStorageSync("token");
			this.data = uni.getStorageSync("data");
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style scoped>
	.con {
		padding: 24rpx;
	}

	.con_header {
		padding: 32rpx 32rpx 0;
		height: 120rpx;
		opacity: 1;
		background: linear-gradient(180deg, #FFF0ED 0%, #FFFFFF 100%);
		border-radius: 10px 10px 0 0;
	}

	.con_header_name {
		height: 46rpx;
		opacity: 1;
		font-size: 32rpx;
		line-height: 46rpx;
		letter-spacing: 0px;
		color: #3D3D3D;
		font-weight: bold;
	}

	.con_header_date {
		height: 32rpx;
		opacity: 1;
		font-size: 22rpx;
		line-height: 32rpx;
		letter-spacing: 0px;
		color: #999999;
		margin-top: 8rpx;
	}

	.con_header_con {
		background: #FFFFFF;
		padding: 88rpx 24rpx 64rpx 24rpx;
		overflow: hidden;
		border-radius: 0 0 10px 10px;
	}

	.con_header_but {
		/* width: 100%; */
		height: 96rpx;
		font-size: 32rpx;
		color: #ffffff;
		background-image: linear-gradient(270deg, #FF5745 0%, #FF8042 100%);
		line-height: 96rpx;
		border-radius: 48rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-bottom: 36rpx;
	}

	.con_header_buts {
		opacity: 0.5;
	}

	.con_header_center {
		display: flex;
		align-items: center;
	}

	.content_list_top {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		line-height: 12px;
		border: 1px solid #FFFFFF;
		position: relative;
		left: -32rpx;
		background-color: #F5F5F5;
	}

	.content_list_bot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		line-height: 12px;
		border: 1px solid #FFFFFF;
		position: relative;
		right: -32rpx;
		background-color: #F5F5F5;
	}

	.content_list_con_solid {
		width: 100%;
		height: 0rpx;
		opacity: 1;
		border-top: 1px dashed #F5F5F5;
	}

	.con_tit {
		opacity: 1;
		font-size: 24rpx;
		line-height: 40rpx;
		letter-spacing: 0px;
		color: #999999;
	}

	.con_tit_name {
		height: 34rpx;
		opacity: 1;
		font-size: 28rpx;
		line-height: 34rpx;
		color: #333333;
		margin-bottom: 8rpx;
		font-weight: 500;
		margin-top: 36px;
	}

	.imgs {
		width: 237rpx;
		height: 237rpx;
		-webkit-transform: rotate(4deg);
		transform: rotate(0deg);
		position: absolute;
		right: 24rpx;
		top: 24rpx;
		overflow: hidden;
	}

	.imgs image {
		width: 237rpx;
		height: 237rpx;
		position: absolute;
		top: -40px;
		right: -40px;
	}
	
	.href_class{
		color: #333333;
		font-weight: 600;
	}
</style>